<template>
	<view>
		<cu-custom :isBack="true" bgColor="bg-white">
			<block slot="content">
				<view class="custom-title">搜索</view>
			</block>
		</cu-custom>
		<view class="padding-32">
			<view class="flex align-center justify-between">
				<view class="search-content">
					<image src="https://txr001.zthj.net/static/img/search.png" class="img-32"></image>
					<input v-model="keywords" class="input-class" placeholder="搜索平台和项目" name="input"></input>
					<image v-if="keywords" @click="closeSearch" src="https://txr001.zthj.net/static/img/searchClose.png" class="search-close"></image>
				</view>
				<view @click="search"><text class="search-text">搜索</text></view>
			</view>
			<view v-if="list.length==0">
				<view class="margin-top-64 flex align-center justify-between">
					<view class="his-text">搜索历史</view>
					<view><image src="https://txr001.zthj.net/static/img/ljt.png" class="img-32"></image></view>
				</view>
				<view class='margin-top-32 flex flex-wrap'>
					<view class="" v-for="(item,index) in historyList" :key="index">
						<view class="cu-tag history" >{{item}}</view>
					</view>
				</view>
			</view>
			
			<view v-if="list.length" class="margin-top-lg flex align-center justify-between flex-wrap">
				<view class="ph-info-content" v-for="(info,index) in List" :key="index">
					<view class="flex align-center justify-between">
						<view class="ph-title">{{info.title}}</view>
						<view>
							<image :src="info.icon" class="img-32"></image>
						</view>
					</view>
					<image :src="info.img" class="img-ph-center"></image>
					<view class="ph-name">{{info.name}}</view>
					<view class="ph-desc">{{info.desc}}</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				keywords:"",
				historyList:["历史","项目","大项目"],
				list:[],
				List:[
					{
						title:"合作平台",
						icon:"https://txr001.zthj.net/static/img/hzpt.png",
						img:"https://txr001.zthj.net/static/img/ph2.png",
						name:"碳时尚",
						desc:"绿色低碳行为产生的碳减排量换算生成，是…"
					},
					{
						title:"第三方平台",
						icon:"https://txr001.zthj.net/static/img/hzpt.png",
						img:"https://txr001.zthj.net/static/img/ph2.png",
						name:"碳时尚",
						desc:"绿色低碳行为产生的碳减排量换算生成，是…"
					},
					{
						title:"普惠项目",
						icon:"https://txr001.zthj.net/static/img/phxm.png",
						img:"https://txr001.zthj.net/static/img/ph2.png",
						name:"这是个项目标题",
						desc:"绿色低碳行为产生的碳减排量换算生成，是…"
					},
					{
						title:"普惠项目",
						icon:"https://txr001.zthj.net/static/img/phxm.png",
						img:"https://txr001.zthj.net/static/img/ph2.png",
						name:"这是个项目标题",
						desc:"绿色低碳行为产生的碳减排量换算生成，是…"
					}
				]
			}
		},
		onLoad() {
		},
		methods: {
			search(){
				this.list=this.List;
			},
			closeSearch(){
				this.keywords=""
				
			}
		}
	}
</script>
<style>
	page{
		background: linear-gradient(180deg, rgba(244,244,244,0) 10%, #F4F4F4 19%);
	}
</style>
<style scoped lang="less">
	.search-content{
		width: 606rpx;
		height: 64rpx;
		line-height: 64rpx;
		border-radius: 24rpx;
		border: 2rpx solid #D9D9D9;
		display: flex;
		align-content: center;
		justify-content: start;
		align-items: center;
		padding:0 26rpx;
		.input-class{
			height: 64rpx;
			line-height: 64rpx;
			text-align: left;
			width: 100%;
			padding-left: 24rpx;
		}
		.search-close{
			width: 28rpx;
			height: 28rpx;
		}
	}
	.search-text{
		font-size: 28rpx;
		font-weight: 400;
		color: #010101;
		border-bottom: 2rpx solid #010101;
	}
	.his-text{
		font-size: 28rpx;
		font-weight: 600;
		color: #010101;
	}
	.history{
		height: 58rpx;
		background: #FFFFFF !important;
		border-radius: 38rpx;
		font-size: 24rpx;
		font-weight: 400;
		color: #010101;
		padding: 0 24rpx;
		margin-right: 32rpx;
	}
	.ph-info-content{
		width: 328rpx;
		height: 420rpx;
		background: #FFFFFF;
		border-radius: 48rpx;
		padding: 32rpx;
		margin-bottom: 32rpx;
		.ph-title{
			font-size: 24rpx;
			font-weight: 600;
			color: #010101;
		}
		.img-ph-center{
			height: 218rpx;
			width: 100%;
		}
		.ph-name{
			margin-top: 16rpx;
			font-size: 24rpx;
			font-weight: 500;
			color: #010101;
			text-align: left;
		}
		.ph-desc{
			margin-top: 4rpx;
			font-size: 24rpx;
			font-weight: 400;
			color: #767879;
			text-align: left;
		}
	}
</style>